import { observer } from "mobx-react-lite";
import { useStore } from "../store";

const ImagePreview = observer((props: any) => {
    const { imagePreviewStore } = useStore();

    const onImgLoad = (e: any) => {
        imagePreviewStore.setSize(e.target.naturalWidth, e.target.naturalHeight);
    }

    if (imagePreviewStore.url) {
        return (
            <div className="absolute right-0 inline-block top-0 bg-slate-800 p-2 rounded-md" style={{ top: imagePreviewStore.top + 'px' }}>
                <img className="max-w-[256px] max-h-[256px]" src={imagePreviewStore.url} onLoad={onImgLoad} />
                <span className="text-xs">{imagePreviewStore.width}x{imagePreviewStore.height}</span>
            </div>
        );
    }

    return null;
});

export { ImagePreview };
